<template>
  <div class="Join-brand pages-box">
    <div class="header flex-center">
      <i class="iconfont icon-dajiantou" @click="$router.go(-1)"></i
      >申请加入品牌
    </div>
    <div class="section">
      <div class="content">
        <div class="con-box">
          <van-form @submit="onSubmit">
            <van-field
              v-model="brandName"
              readonly
              clickable
              size="large"
              name="brandName"
              label="选择品牌"
              right-icon="arrow"
              input-align="right"
              required
              :rules="[{ required: true, message: '请选择品牌' }]"
              @click="showBrand = true"
            />
            <van-field
              v-model="brandIntroduce"
              readonly
              clickable
              size="large"
              name="brandIntroduce"
              label="选择审核人"
              input-align="right"
              right-icon="arrow"
              required
              :rules="[{ required: true, message: '请选择审核人' }]"
              @click.stop="
                if (departId) {
                  showReview = true;
                } else {
                  return $toast('请先选择品牌')
                }
              "
            />
            <div style="margin: 48px 0 0">
              <van-button
                round
                block
                color="linear-gradient(to right, #F95276, #FD7795)"
                native-type="submit"
                >申请加入</van-button
              >
            </div>
          </van-form>
          <div class="all" v-if="failList.brandAudit===2">
            <div class="reject">
              <img src="../assets/img/weitongguo.png" alt="" />
            </div>
            <div class="fail">
              <div class="fail-title">驳回原因：</div>
              <div class="fail-content">{{ failList.refuse }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model="showBrand" position="bottom">
      <van-picker
        show-toolbar
        value-key="brandName"
        :columns="brands"
        @confirm="onConfirm"
        @cancel="showBrand = false"
      />
    </van-popup>
    <van-popup v-model="showReview" position="bottom">
      <van-picker
        show-toolbar
        :columns="brandAuditorList"
        @change="onChange"
        @confirm="onConfirm1"
        @cancel="showReview = false"
      />
    </van-popup>
  </div>
</template>
<script>
import { applyJoinBrand, allBrand, brandAuditor } from "@/api/brand";
import {getPersonalInfo} from "../api/users";
export default {
  data() {
    return {
      form: {
        brandId: "",
        brandIntroduce: "",
      },
      brandName: "",
      brandIntroduce: "",
      showBrand: false,
      brands: [],
      showReview: false,
      departId: 0,
      brandAuditorList: [],
      failList:[],
      unitName: ""
    };
  },
  created() {
    if (!localStorage.getItem("jyToken")) {
      return this.$router.replace({
        name: "Login",
        query: { dirUrlName: "JoinBrand" },
      });
    }
    this.getBrand();
    this.getList();
  },
  methods: {
    getList(){
      getPersonalInfo().then(res=>{
        this.failList = res.data
      })
    },
    onSubmit(values) {
      if(
          this.failList.avatar !== null &&this.failList.userName !== null
          &&this.failList.userPid !== null &&this.failList.userPhone !== null
          &&this.failList.educational !== null &&this.failList.ismarital !== null
          &&this.failList.introduce !== null &&this.failList.lifePhotos !== null
          &&this.failList.idCardPic !== null &&this.failList.educationalPic !== null
      ){
        console.log(this.form,"form");
        applyJoinBrand(this.form)
            .then((res) => {
              console.log(res,"info");
              if (res.code === 0) {
                this.$toast("申请加入成功");
                this.$router.replace({ name: "About" });
              } else {
                this.$toast(res.msg);
                this.$router.push({
                  path: "/Personaldata",
                });
              }
            })
            .catch((err) => {
              this.$toast("申请失败，请稍后重试！");
            });
      }else{
        this.$toast("请去个人资料填写必填项,再来申请哦！");
        this.$router.push({
          path: "/Personaldata",
        });
      }
    },
    onConfirm(value) {
      this.form.brandId = value.id;
      this.brandName = value.brandName;
      this.departId = value.departId;
      this.brandIntroduce = null
      this.brandAuditorList = []
      this.showBrand = false;
      this.getBrandAuditor();
    },
    onConfirm1(value) {
      let a = value.join()
      this.form.brandIntroduce = value[1];
      this.brandIntroduce = a;
      this.showReview = false;
      // this.brandAuditorList = null
    },
    onChange(picker,value,data){
      console.log(value,data);
    },
    getBrand() {
      allBrand().then((res) => {
        console.log(res,"333");
        if (res.code === 0) {
          this.brands = res.data;
        }
      });
    },
    getBrandAuditor() {
      brandAuditor({
        departId: this.departId,
      }).then((res) => {
        if (res.code === 0) {
          const a  = res.data
          if(res.data.length <= 0) {
            this.$toast("请向工作人员反馈！添加审核人！");
          }
          const b = []
          a.map((item,index)=>{
            b.push({
              text:item.realname,
              children:[
                {
                  text:item.unitName
                }
              ]
            })
          })
          console.log(b,22);
          this.brandAuditorList=b
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.Join-brand {
  background: #f6f7f8;
  .content {
    padding: 16px 16px 20px;
    .con-box {
      background: #ffffff;
      border-radius: 6px;
      padding: 5px 5px 14px;
    }
  }
}
/deep/.van-cell--large .van-cell__title {
  font-size: 14px;
  color: #363a44;
}
</style>
<style>
.van-field__right-icon {
  color: #bebfc1 !important;
}
.reject{
  margin: 40px 0;
  display: flex;
  justify-content: center;
}
.fail{
  padding: 0 20px;
}
.fail-title{
  font-size: 18px;
  color: #ccc;
  margin: 10px 0;
}
.fail-content{
  font-size: 14px;
}
</style>
